<template>
    <div v-if="visible" class="toast">
      {{ message }}
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        visible: false,
        message: ''
      };
    },
    methods: {
      show(msg, duration = 3000) {
        this.message = msg;
        this.visible = true;
        setTimeout(() => {
          this.visible = false;
        }, duration);
      }
    }
  };
  </script>
  
  <style scoped>
  .toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: rgb(248, 13, 13);
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 999;
  }
  </style>    